<template>
	<div>
		<p>Using mustaches: {{rawHtml}}</p>
		<p>Using v-html directive: <span v-html="rawHtml"></span></p>
		<div v-if="seen">现在看到我了</div>
		<a v-bind:href="url">点我</a>
		<div>
			<p>Original message: '{{message}}'</p>
			<p>Computed reversed message: '{{reversedMessage}}'</p>
			<p>num: {{num}}</p>
			<!-- <p @click='click' :class="{active: isActive, color: isActive}">点我</p> -->
			<p @click='click' :class="classObject">点我(class 对象语法)</p> 
			<!-- class类很强大 -->
			<div>{{fullName}}</div>
			<!-- class 数组语法 -->
			<div :class="[activeClass, errorClass]">数组语法</div>
			<!-- class 数组三元语法 -->
			<div :class="[isActive ? activeClass : '', errorClass]">数组三元语法</div>
			<!-- class 数组对象方法 -->
			<div :class="[{active: isActive}, errorClass]">数组对象方法</div>

			<!-- 条件渲染 -->
			<h1 v-if="isActive">yes</h1>
			<h1 v-else>No</h1>

			<!-- v-show 不支持template元素 --> 
			<h1 v-show="isActive">show</h1> 

			<!-- v-for 数组 in 和 of 相同 -->
			<ul>
				<li v-for="(item, index) in items">
					{{item.message + '--' + index}}
				</li>
			</ul>
			<!-- v-for 对象 -->
			<ul>
				<li v-for="(val, key, index) in obj">
					{{index + key + val}}
				</li>
			</ul>

			<!-- 显示过滤/排序结果 -->
			<!-- 使用计算属性 -->
			<!-- <ul>
				<li v-for="item of evenArray">
					{{item}}
				</li>
			</ul> -->
			<!-- 使用函数 -->
			<ul>
				<li v-for="item of even(array)">
					{{item}}
				</li>
			</ul>

			<!-- 单个复选框 -->
			<div>
				<input type="checkbox" id="checkbox" v-model="checkbox">
				<label for="checkbox">{{checkbox}}</label>
			</div>
			<!-- 多个复选框 -->
			<div>
				<input type="checkbox" value="jack" id="jack" v-model="checkedNames">
				<label for="jack">jack</label>
				<input type="checkbox" value="mike" id="mike" v-model="checkedNames">
				<label for="mike">mike</label>
			</div>
			
			<!-- 单选框 -->
			<div>
				<input type="radio" value="One" id="one" v-model="picked">
				<label for="one">One</label>
				<input type="radio" value="Two" id="two" v-model="picked">
				<label for="two">Two</label>
				<div>Picked: {{picked}}</div>
			</div>

			<!-- 选择框 -->
			<div>
				<select v-model="selected">
					<option disabled value="">请选择</option>
					<option value="a">A</option>
					<option value="b">B</option>
				</select>
				<div>Selected: {{selected}}</div>
			</div>
			<!-- 多选选择框 -->
			<div>
				<select v-model="selecteds" multiple>
					<option>A</option>
					<option>B</option>
					<option>C</option>
				</select>
				<div>Selecteds: {{selecteds}}</div>
			</div>

			<input type="text" v-model.lazy.number="msg">
			<div>{{msg}}</div>

			<A1 @increment='incrementTotal' :title.sync="bar"></A1>
			<p>{{counter}}</p>

			<!-- slot-scpe 的值将被用作一个临时变量名, 此变量接收从子组件传递过来的prop对象 -->
			<Slot1 :items='items' ref="test">
				<li slot="item" slot-scope="props">
					 {{ props.message }}
				</li>
			</Slot1>	

			<!-- 自定义指令 -->
			<input v-focus>

			<!-- 函数简写与对象字面量 -->
			<div v-demo="{ color: 'white', text: 'hello!' }">对象字面量</div>


			<!-- 动态组件 -->
			<!-- <component :is="currentView"></component> -->
		</div>
	</div>
</template>

<script>
import a1 from '@/components/A'
import slot1 from '@/components/Slot'
export default {
	name: 'Html',
	data () {
		return {
			rawHtml: '<span style="color:red">This should be red.</span>',
			seen: true,
			url: 'http://www.baidu.com',
			message: 'Hello',
			firstName: 'li',
			lastName: 'song',
			fullName: 'li song',
			isActive: true,
			// classObject: {  //对象值为css 声明好的
			// 	active: true,
			// 	'color': true
			// },
			activeClass: 'active',
			errorClass: 'color',
			items:[
				{message: 'Foo'},
				{message: 'Bar'}
			],
			obj:{
				first: 'li',
				last: 'song',
				age: 25
			},
			array:[1, 2, 3, 4, 5, 6, 7, 8],
			checkbox: false,
			checkedNames:[],
			picked: '',
			selected: '',
			selecteds: [],
			msg: '',
			counter: 0,
			bar : 'title'
		}
	},
	computed :{
		reversedMessage () {
			return this.message.split('').reverse().join('');
		},
		num : {
			get (){
				return new Date().getTime();
			},
			set (newval){
				
			}
		},
		//计算属性绑定class 切记计算属性值和data值不能同时存在的
		classObject(){
			return {
				active: true,
				color: true
			}
		},
		evenArray(){
			return this.array.filter(function(number){
				return number % 2 == 0
			})
		}
		// fullName (){
		// 	return this.firstName + ' ' + this.lastName
		// }
		//计算属性默认只有getter, 不过在需要时你也可以提供一个setter

	},
	methods: {
		click (){
			this.message = "你好";
			this.lastName = 'lei';
			this.isActive = !this.isActive;
			this.items.push({message: 'Baz'});
			// Vue.set(this.items, 1, {message: 'LS'}) 
			this.items.splice(1, 1, {message: 'LS'})
			console.log(this.checkbox);
			console.log(this.checkedNames);
			console.log(this.$refs.test);
		},
		even (array){
			return array.filter(function(number){
				return number % 2 == 0
			})
		},
		incrementTotal(){
			this.counter += 1;
		}
	},
	watch: {
		firstName (val){
			this.fullName = val + ' ' + this.lastName
		},
		lastName (val){
			this.fullName = this.firstName + ' ' + val
		},
		bar (val1, val2){
			console.log(val1 + val2);
		}
	},
	components: {
		A1: a1,
		Slot1: slot1
	},
	directives: {
		focus: {
			// 指令的定义
			inserted: function (el) {
				el.focus()
			},
			bind: function(el){
				console.log(el);
				el.style.color = 'red';
			},
			unbind: function(){
				console.log("unbind");
			}
		},
		//函数简写与对象字面量
		demo: function(el, binding){
			console.log(binding.value.color) // => "white"
  			console.log(binding.value.text)  // => "hello!"
		}
	}
}

/*
	1.自定义组件的v-model 没有懂什么意思;
	2.数据对象在内部会进行浅合并, 在和组件的数据发生冲突时以组件数据有限;
	3.同名钩子函数将会混合为一个数组, 因此都将被调用, 另外, 混入对象的钩子将在组件自身钩子之前调用;
	4.值为对象的选项, 例如methods, components和directives, 将被混合为同一对象, 两个对象键名冲突时, 取组件对象的键值对;
	5.注意: Vue.extend()也使用同样的策略进行合并;
*/ 
</script>

<style scoped>
.active{
	background-color: red;
}
.color{
	color: white;
}
</style>


